<% content_for :javascript do %>
<%= javascript_include_tag 'underscore-min.js' %>
<%= javascript_include_tag 'dcmgr_gui/load_balancer_panel.js' %>
<%= javascript_include_tag 'ui.selectmenu.js' %>
<script type="text/javascript">
  jQuery(function($){
  dcmgrGUI.loadBalancerPanel();
  });
</script>
<% end %>

<% content_for :stylesheet do %>
<style type="text/css">
  .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { text-align:center; float: none;}
  .ui-dialog .ui-dialog-content {margin:5px;}
  .ui-selectmenu-status { margin-top: 1px; }
</style>
<% end %>

<div id="mainarea_wide">
  <h3><img src="images/icon_resource.gif" /><%= t("load_balancers.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  <div id="list_load_mask" class="maincontent">
    <div class="controller clearfix">
      <a href="javascript:void(0);" class="create_load_balancer"><%= t("load_balancers.button.create_load_balancer") %></a>
      <select name="load_balancer_action" id="load_balancer_action" style="height:10px">
        <option value="" selected="selected"><%= t("selectmenu.select_action") %></option>
        <optgroup label="Action">
          <option class="register" value="register"><%= t("load_balancers.load_balancer_actions.register_instance") %></option>
          <option class="unregister" value="unregister"><%= t("load_balancers.load_balancer_actions.unregister_instance") %></option>
          <option class="delete" value="delete"><%= t("load_balancers.load_balancer_actions.delete_load_balancer") %></option>
          <option class="poweron" value="poweron"><%= t("load_balancers.load_balancer_actions.poweron") %></option>
          <option class="poweroff" value="poweroff"><%= t("load_balancers.load_balancer_actions.poweroff") %></option>
          <option class="Active/Standby" value="active_standby"><%= t("load_balancers.load_balancer_actions.active_standby") %></option>
        </optgroup>
      </select>
      <a href="javascript:void(0);" class="refresh" style="margin-left:585px"><%= t("button.refresh") %></a>
    </div>

    <div class="controller clearfix">
      <div id="pagenate" class="r_float">
	<a href="javascript:void(0);" class="prev"></a>
	<p id="viewPagenate"></p>
	<a href="javascript:void(0);" class="next"></a>
      </div>
    </div>

    <div id="display_load_balancers" class="display_area">
      <% content_for :javascript_template do %>
      <script id="loadBalancersListTemplate" type="text/x-jquery-tmpl">
	<table class="ptn01" frame="void" cellpadding="0" cellspacing="0" border="0">
	  <tr>
	    <th></th>
	    <th><%= t("load_balancers.list.display_name") %></th>
	    <th><%= t("load_balancers.list.ip") %></th>
	    <th><%= t("load_balancers.list.state") %></th>
	    <th><%= t("load_balancers.list.action") %></th>
	  </tr>
	  {{each(index,item) rows}}
	  <tr id="row-${item.uuid}">
	    {{if item.uuid }}
	    <td class="listradiobutton"><input id="${item.uuid}" type="radio" name="select" value="${item.uuid}" ></td>
	    {{else}}
	    <td class="listradiobutton"></td>
	    {{/if}}
	    <td class="vtip display_name" title="display name">${item.display_name}</td>
	    <td class="vtip ip" title="ip">
	      {{each(index,item) vif}}
	      {{if vif.ipv4 && vif.vif_index == 0}}
	      ${vif.ipv4.ipv4.address}
	      {{/if}}
	      {{/each}}</td>
	    <td class="state vtip center" title="state">${item.state}</td>
	    {{if item.uuid}}
	    <td class="vtip center" title="action">
              <a href="javascript:void(0);" class="edit_load_balancer" id="edit_${item.uuid}"><%= t('load_balancers.button.edit_load_balancer') %></a>
	    </td>
	    {{else}}
	    <td class="vtip center" title="action"></td>
	    {{/if}}
	  </tr>
	  {{/each}}
	</table>
      </script>
      <% end %>
    </div>
  </div>
  <div id="btm_maincontent_wide"></div>
  <h3><img src="images/icon_ttl_detail.gif" /><%= t("load_balancers.details.header") %><a href="javascript:void(0);" class="showhide"></a></h3>
  <div id="detail" class="maincontent">
    <% content_for :javascript_template do %>
    <script id="loadBalancersDetailTemplate" type="text/x-jquery-tmpl">
      <div id="${item.uuid}" class="display_area">
	<h4 class="ptn01"><%= t("load_balancers.details.load_balancer_id") %>:<span class="instansid">${item.uuid}</span></h4>
	<table class="ptn02"  frame="void" cellpadding="0" cellspacing="0" border="0">
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.load_balancer_id") %>:</td>
	    <td class="load_balancer_size">${item.uuid}</td>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.display_name") %>:</td>
	    <td>${item.display_name}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.load_balancer_port") %>:</td>
	    <td class="load_balancer_size">${item.inbounds[0].port}</td>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.load_balancer_protocol") %>:</td>
	    <td>${item.inbounds[0].protocol}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.instance_port") %>:</td>
	    <td class="load_balancer_size">${item.instance_port}</td>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.instance_protocol") %>:</td>
	    <td>${item.instance_protocol}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.ip") %></td>
      <td colspan="7">{{each(index,vif) item.vif}}{{if vif.ipv4 && vif.vif_index == 0}}${vif.ipv4.address}{{/if}}{{/each}}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.description") %></td>
	    <td colspan="7">${item.description}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title" style="width:180px"><%= t("load_balancers.details.register_instances") %></td>
	    <td colspan="7">{{each(index,vif) item.target_vifs}}${vif.display_name} (${vif.instance_id})<br />{{/each}}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.status") %>:</td>
	    <td class="state">${item.state}</td>
	  </tr>
	  <tr>
	    <td class="padcell"></td>
	    <td class="title"><%= t("load_balancers.details.created_at") %>:</td>
	    <td colspan="7">${item.created_at}</td>
	  </tr>
	</table>
      </div>
    </script>
    <% end %>
  </div><!-- maincontent -->
  <div id="btm_maincontent_wide_last"></div>
</div><!-- mainarea_wide -->
